<template>
    <view
        class="u-swiper-wrap"
        :style="$u.toStyle({ borderRadius: `${borderRadius}rpx` }, customStyle)"
        :class="customClass"
    >
        <swiper
            :current="elCurrent"
            @change="change"
            @animationfinish="animationfinish"
            :interval="interval"
            :circular="circular"
            :duration="duration"
            :autoplay="autoplay"
            :previous-margin="effect3d ? effect3dPreviousMargin + 'rpx' : '0'"
            :next-margin="effect3d ? effect3dPreviousMargin + 'rpx' : '0'"
            :style="{ height: height + 'rpx', backgroundColor: bgColor }"
        >
            <swiper-item class="u-swiper-item" v-for="(item, index) in list" :key="index">
                <view
                    class="u-list-image-wrap"
                    @tap.stop.prevent="listClick(index)"
                    :class="[uCurrent != index ? 'u-list-scale' : '']"
                    :style="{
                        borderRadius: `${borderRadius}rpx`,
                        transform: effect3d && uCurrent != index ? 'scaleY(0.9)' : 'scaleY(1)',
                        margin: effect3d && uCurrent != index ? '0 20rpx' : 0
                    }"
                >
                    <image class="u-swiper-image" :src="item[name] || item" :mode="imgMode"></image>
                    <view
                        v-if="title && item.title"
                        class="u-swiper-title u-line-1"
                        :style="[{ 'padding-bottom': titlePaddingBottom }, titleStyle]"
                    >
                        {{ item.title }}
                    </view>
                </view>
            </swiper-item>
        </swiper>
        <view
            class="u-swiper-indicator"
            :style="{
                top:
                    indicatorPos == 'topLeft' || indicatorPos == 'topCenter' || indicatorPos == 'topRight'
                        ? '12rpx'
                        : 'auto',
                bottom:
                    indicatorPos == 'bottomLeft' || indicatorPos == 'bottomCenter' || indicatorPos == 'bottomRight'
                        ? '12rpx'
                        : 'auto',
                justifyContent: justifyContent,
                padding: `0 ${effect3d ? '74rpx' : '24rpx'}`
            }"
        >
            <block v-if="mode == 'rect'">
                <view
                    class="u-indicator-item-rect"
                    :class="{ 'u-indicator-item-rect-active': index == uCurrent }"
                    v-for="(item, index) in list"
                    :key="index"
                ></view>
            </block>
            <block v-if="mode == 'dot'">
                <view
                    class="u-indicator-item-dot"
                    :class="{ 'u-indicator-item-dot-active': index == uCurrent }"
                    v-for="(item, index) in list"
                    :key="index"
                ></view>
            </block>
            <block v-if="mode == 'round'">
                <view
                    class="u-indicator-item-round"
                    :class="{ 'u-indicator-item-round-active': index == uCurrent }"
                    v-for="(item, index) in list"
                    :key="index"
                ></view>
            </block>
            <block v-if="mode == 'number'">
                <view class="u-indicator-item-number">{{ uCurrent + 1 }}/{{ list.length }}</view>
            </block>
        </view>
    </view>
</template>

<script lang="ts">
export default {
    name: 'u-swiper',
    options: {
        addGlobalClass: true,
        // #ifndef MP-TOUTIAO
        virtualHost: true,
        // #endif
        styleIsolation: 'shared'
    }
};
</script>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { SwiperProps } from './types';
import { $u } from '../..';

/**
 * swiper 轮播图
 * @description 该组件一般用于导航轮播，广告展示等场景,可开箱即用
 * @tutorial https://uviewpro.cn/zh/components/swiper.html
 * @property {Array} list 轮播图数据，见官网"基本使用"说明
 * @property {Boolean} title 是否显示标题文字，需要配合list参数，见官网说明（默认false）
 * @property {String} mode 指示器模式，见官网说明（默认round）
 * @property {String|Number} height 轮播图组件高度，单位rpx（默认250）
 * @property {String} indicator-pos 指示器的位置（默认bottomCenter）
 * @property {Boolean} effect3d 是否开启3D效果（默认false）
 * @property {Boolean} autoplay 是否自动播放（默认true）
 * @property {String|Number} interval 自动轮播时间间隔，单位ms（默认2500）
 * @property {Boolean} circular 是否衔接播放，见官网说明（默认true）
 * @property {String} bg-color 背景颜色（默认#f3f4f6）
 * @property {String|Number} border-radius 轮播图圆角值，单位rpx（默认8）
 * @property {Object} title-style 自定义标题样式
 * @property {String|Number} effect3d-previous-margin mode = true模式的情况下，激活项与前后项之间的距离，单位rpx（默认50）
 * @property {String} img-mode 图片的裁剪模式，详见image组件裁剪模式（默认aspectFill）
 * @event {Function} click 点击轮播图时触发
 * @example <u-swiper :list="list" mode="dot" indicator-pos="bottomRight"></u-swiper>
 */

const props = defineProps(SwiperProps);
const emit = defineEmits(['click', 'change']);

// 当前活跃的swiper-item的index
const uCurrent = ref(Number(props.current));

// 监听list变化，重置uCurrent值，避免溢出
watch(
    () => props.list,
    (nVal, oVal) => {
        if (nVal.length !== oVal.length) uCurrent.value = 0;
    }
);
// 监听外部current的变化，实时修改内部依赖于此测uCurrent值
watch(
    () => props.current,
    n => {
        uCurrent.value = Number(n);
    }
);

// 容器 justifyContent
const justifyContent = computed(() => {
    if (props.indicatorPos == 'topLeft' || props.indicatorPos == 'bottomLeft') return 'flex-start';
    if (props.indicatorPos == 'topCenter' || props.indicatorPos == 'bottomCenter') return 'center';
    if (props.indicatorPos == 'topRight' || props.indicatorPos == 'bottomRight') return 'flex-end';
    return 'center';
});

// 标题下边距
const titlePaddingBottom = computed(() => {
    if (props.mode == 'none') return '12rpx';
    if (['bottomLeft', 'bottomCenter', 'bottomRight'].includes(props.indicatorPos) && props.mode == 'number') {
        return '60rpx';
    } else if (['bottomLeft', 'bottomCenter', 'bottomRight'].includes(props.indicatorPos) && props.mode != 'number') {
        return '40rpx';
    } else {
        return '12rpx';
    }
});

// swiper组件current参数只接受Number类型
const elCurrent = computed(() => Number(props.current));

/**
 * 点击轮播图项
 */
function listClick(index: number) {
    emit('click', index);
}

/**
 * swiper change事件
 */
function change(e: any) {
    const current = e.detail.current;
    uCurrent.value = current;
    emit('change', current);
}

/**
 * swiper animationfinish事件
 * 头条小程序不支持animationfinish事件，改由change事件
 * 暂不监听此事件，因为不再给swiper绑定uCurrent属性
 */
function animationfinish(e: any) {
    // #ifndef MP-TOUTIAO
    // uCurrent.value = e.detail.current
    // #endif
}

defineExpose({ listClick, change, animationfinish });
</script>

<style lang="scss" scoped>
@import '../../libs/css/style.components.scss';

.u-swiper-wrap {
    position: relative;
    overflow: hidden;
    transform: translateY(0);
}

.u-swiper-image {
    width: 100%;
    will-change: transform;
    height: 100%;
    /* #ifndef APP-NVUE */
    display: block;
    /* #endif */
    /* #ifdef H5 */
    pointer-events: none;
    /* #endif */
}

.u-swiper-indicator {
    padding: 0 24rpx;
    position: absolute;
    @include vue-flex;
    width: 100%;
    z-index: 1;
}

.u-indicator-item-rect {
    width: 26rpx;
    height: 8rpx;
    margin: 0 6rpx;
    transition: all 0.5s;
    background-color: rgba(0, 0, 0, 0.3);
}

.u-indicator-item-rect-active {
    background-color: rgba(255, 255, 255, 0.8);
}

.u-indicator-item-dot {
    width: 14rpx;
    height: 14rpx;
    margin: 0 6rpx;
    border-radius: 20rpx;
    transition: all 0.5s;
    background-color: rgba(0, 0, 0, 0.3);
}

.u-indicator-item-dot-active {
    background-color: rgba(255, 255, 255, 0.8);
}

.u-indicator-item-round {
    width: 14rpx;
    height: 14rpx;
    margin: 0 6rpx;
    border-radius: 20rpx;
    transition: all 0.5s;
    background-color: rgba(0, 0, 0, 0.3);
}

.u-indicator-item-round-active {
    width: 34rpx;
    background-color: rgba(255, 255, 255, 0.8);
}

.u-indicator-item-number {
    padding: 6rpx 16rpx;
    line-height: 1;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 100rpx;
    font-size: 26rpx;
    color: rgba(255, 255, 255, 0.8);
}

.u-list-scale {
    transform-origin: center center;
}

.u-list-image-wrap {
    width: 100%;
    height: 100%;
    flex: 1;
    transition: all 0.5s;
    overflow: hidden;
    box-sizing: content-box;
    position: relative;
}

.u-swiper-title {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.3);
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: 28rpx;
    padding: 12rpx 24rpx;
    color: rgba(255, 255, 255, 0.9);
}

.u-swiper-item {
    @include vue-flex;
    overflow: hidden;
    align-items: center;
}
</style>
